<template>
  <view>
    <u-modal
      :show-cancel-button="true"
      v-model="show"
      @confirm="confirm"
      @cancel="show = false"
      :content="content"
    ></u-modal>
    <view v-if="isShow" class="class-btn">
      <view class="tip">您还未加入任何班级</view>
      <view class="btn">
        <u-button @click="joinClass" type="primary">加入班级</u-button>
      </view>
    </view>
    <view v-else-if="hasCreateAuth && !isCreate" class="class-btn">
      <view class="tip">您还未创建任何班级</view>
      <view class="btn">
        <u-button @click="createClazz" type="success">创建班级</u-button>
      </view>
    </view>
    <view v-else>
      <view class="cl">
        <view class="class-name">{{ clazz.name }}班</view>
        <view class="class-info" v-if="isCreate">
          <u-button size="mini" @click="clazzInfo" type="primary"
            >班级信息</u-button
          >
        </view>
        <view class="class-info" v-if="!isCreate">
          <u-button size="mini" @click="exitClazz" type="primary"
            >退出班级</u-button
          >
        </view>
      </view>
      <u-line color="blue" />
      <view class="navbar">
        <u-grid :col="4">
          <u-grid-item @tap="member">
            <u-icon name="account" :size="46"></u-icon>
            <view class="grid-text">成员</view>
          </u-grid-item>
          <u-grid-item @tap="apply">
            <u-icon name="list-dot" :size="46"></u-icon>
            <view class="grid-text">请销假</view>
          </u-grid-item>
          <u-grid-item @tap="discuss">
            <u-icon name="chat" :size="46"></u-icon>
            <view class="grid-text">讨论区</view>
          </u-grid-item>
          <u-grid-item @tap="more">
            <u-icon name="grid" :size="46"></u-icon>
            <view class="grid-text">更多</view>
          </u-grid-item>
        </u-grid>
      </view>
      <u-line color="blue" />
      <view class="tap">
        <text class="title">班级日志</text>
      </view>
      <u-line color="blue" />
      <view class="leo-list">
        <view
          class="uni-flex uni-row leo-align-items-center leo-space-between leo-list-item"
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="uni-flex uni-row leo-align-items-center">
            <view class="">
              <view
                class="text-line-height-1 text-16 pingfangbold leo-ellipsis-1 u-type-primary"
              >
                <span>
                  {{ item.name }}
                </span>
                <view class="time-line">
                  <u-time-line>
                    <view class="time-line-item">
                      <u-time-line-item
                        v-for="(data, index1) in item.courseFiles"
                        :key="index1"
                        nodeTop="2"
                      >
                        <template v-slot:node>
                          <view class="u-node">
                            <!-- 此处为uView的icon组件 -->
                            <u-icon
                              v-if="data.type === 1"
                              name="word"
                              color="#2979ff"
                              custom-prefix="custom-icon"
                              :size="50"
                            />
                            <u-icon
                              v-if="data.type === 2"
                              name="PPT"
                              color="#2979ff"
                              custom-prefix="custom-icon"
                              :size="50"
                            />
                            <u-icon
                              v-if="data.type === 3"
                              name="excel"
                              color="#2979ff"
                              custom-prefix="custom-icon"
                              :size="50"
                            />
                            <u-icon
                              v-if="data.type === 4"
                              name="PDF"
                              color="#2979ff"
                              custom-prefix="custom-icon"
                              :size="50"
                            />
                          </view>
                        </template>
                        <template v-slot:content>
                          <view>
                            <view class="time-line-time">
                              <text class="time">{{
                                data.gmtCreate | dateFormat
                              }}</text>
                            </view>
                            <view
                              class="time-line-title"
                              @click="courseFileClick(data)"
                              >{{ data.name }}</view
                            >
                          </view>
                        </template>
                      </u-time-line-item>
                    </view>
                  </u-time-line>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" />
      <u-action-sheet
        :list="list1"
        @click="click1"
        v-model="show2"
      ></u-action-sheet>
      <u-popup v-model="show1" mode="top">
        <view class="popup">
          <view class="title">文件保存路径</view>
          <br />
          <view class="word-break">
            {{ tip }}
          </view>
        </view>
      </u-popup>
      <view class="bottom-btn" v-if="isCreate">
        <u-button
          @click="toPostData"
          type="primary"
          :ripple="true"
          size="medium"
          >发布资料</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { getUserInfo, removeUserInfo, setUserInfo } from "../../common/auth";
import download from "../../utils/downloader";

export default {
  data() {
    return {
      list1: [{ text: "在线预览" }, { text: "下载" }, { text: "收藏" }],
      show1: false,
      tip: "",
      list: [],
      currentCourseFile: {},
      page: 1,
      status: "",
      show2: false,

      isShow: false,
      hasCreateAuth: false,
      clazz: {},
      //是否是审核者
      isCreate: false,
      // 模态框
      show: false,
      content: "您确定要退出班级吗？",
    };
  },
  async onLoad() {
    uni.$emit("setVuexUserInfo", { user: null, isLoginPage: false });
    const res = await this.$u.api.getCreateOrJoinClass();
    this.isShow = res.isShow;
    this.isCreate = res.isCreate;
    this.hasCreateAuth = res.hasCreateAuth;
    this.clazz = res.data;
    if (!this.isShow) {
      this.initial();
    }
    uni.$on("courseFileRefresh", this.initial);
  },
  methods: {
    initial() {
      this.page = 1;
      this.total = 0;
      this.getList().then((res) => {
        this.list = res.data;
        this.total = res.total;
        uni.stopPullDownRefresh();
      });
    },
    async getList() {
      return await this.$u.api.getCourseFilePage(this.clazz.id, {
        pageNum: this.page,
      });
    },
    courseFileClick(data) {
      this.currentCourseFile = data;
      this.show2 = true;
    },
    click1(index) {
      if (index === 0) {
        this.toFileShow(this.currentCourseFile);
      } else if (index === 1) {
        download
          .load(this.currentCourseFile.path, this.currentCourseFile.name, false)
          .then(([err, res]) => {
            if (err != null) {
              this.$u.toast("出错啦，错误信息：" + err);
            } else {
              // #ifndef H5
              this.tip = res.savedFilePath;
              this.show1 = true;
              // #endif
              console.log(res);
            }
          });
      } else {
        let data = {
          userId: this.$store.getters.id,
          courseFileId: this.currentCourseFile.id,
        };
        this.$u.api.saveCollect(data).then((res) => {
          if (res.code === 200) {
            this.$u.toast("收藏成功！");
          }
        });
      }
    },
    toFileShow(courseFile) {
      let index = courseFile.path.lastIndexOf(".");
      let data = {
        name: courseFile.name,
        path: courseFile.path.substr(0, index),
      };
      uni.setStorage({
        key: "pdf-url",
        data: JSON.stringify(data),
        success: (res) => {
          this.$u.route({
            url: "pages/show_pdf/show_pdf",
          });
        },
        fail: (err) => {
          console.log(err);
          this.$u.toast("出错啦！");
        },
      });
    },
    toPostData() {
      this.$u.route({
        url: "pages/post_course_file/post_course_file",
        params: {
          id: this.clazz.id,
        },
      });
    },
    clazzInfo() {
      this.$u.route({
        url: "/pages/clazz_info/clazz_info",
        params: {
          id: this.clazz.id,
        },
      });
    },
    joinClass() {
      this.$u.route("/pages/join_clazz/join_clazz");
    },
    createClazz() {
      this.$u.route("/pages/create_clazz/create_clazz");
    },
    apply() {
      if (this.isCreate) {
        this.$u.route({
          url: "pages/audit_ask_for_leave/audit_ask_for_leave",
          params: {
            id: this.clazz.id,
          },
        });
      } else {
        this.$u.route("pages/apply/apply");
      }
    },
    discuss() {
      this.$u.route({
        url: "/pages/discuss/discuss",
        params: {
          name: this.clazz.name + "班",
          id: this.clazz.id,
        },
      });
    },
   more(){
      this.$u.route({
        url: 'pages/more/more',
        params: {
          id: this.clazz.id,
          type: 2
        }
      });
    },
    member() {
      this.$u.route({
        url: "pages/member_list/member_list",
        params: {
          id: this.clazz.id,
          type: 2,
        },
      });
    },
    exitClazz() {
      this.show = true;
    },
    confirm() {
      this.$u.api
        .exitClazz(this.$store.getters.id, this.clazz.id)
        .then((res) => {
          if (res.code === 200) {
            let user = getUserInfo();
            removeUserInfo();
            user.clazzId = "0";
            setUserInfo(user);
            this.$u.route({
              type: "tab",
              url: "/pages/mine/mine",
            });
          }
        });
    },
  },
};
</script>

<style lang="scss">
.class-btn {
  text-align: center;
  margin: 50rpx 40rpx;
  .tip {
    color: #e37470;
    font-weight: bolder;
  }
  .btn {
    margin-top: 20rpx;
  }
}
.cl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .class-name {
    font-size: 35rpx;
    margin: 40rpx 0 30rpx 45rpx;
    color: black;
    font-weight: bolder;
  }
  .class-info {
    margin-right: 20rpx;
  }
}

.grid-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: $u-type-info;
}
.tap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .title {
    margin: 40rpx 0 30rpx 45rpx;
    color: black;
    font-weight: bolder;
    font-size: 35rpx;
  }
}
.leo-list {
  margin: 15rpx 20rpx;
  background: #ffffff;
  .leo-list-item {
    padding: 18px 12px;
    margin-bottom: 20px;
    box-shadow: -2px 0px 16px 6px rgba(163, 163, 163, 0.15);
  }
}
.uni-flex {
  display: flex;
  flex-direction: row;
}

.uni-flex-item {
  flex: 1;
}

.uni-row {
  flex-direction: row;
}

.uni-column {
  flex-direction: column;
}

.leo-align-items-center {
  align-items: center;
}

.leo-space-between {
  // justify-content: space-between;
}

.text-line-height-1 {
  line-height: 1 !important;
}

.text-12 {
  font-size: 25rpx !important;
}
.text-16 {
  font-size: 30rpx;
}
.leo-ellipsis-1 {
  display: flex;
  flex-direction: column;
  color: #000;
  font-style: 18px;
  font-weight: bold;
  .childstyle {
    padding: 0px 10px 0px 16px;
    .children-for {
      display: flex;
      margin-bottom: 60rpx;
      .children-content {
        color: rgb(40, 40, 40);
        font-style: 16px;
        font-weight: 400;
        /* 强制一行内显示文本 */
        white-space: nowrap;
        /* 超出的部分隐藏 */
        overflow: hidden;
        /* 文字用省略号替代超出部分 */
        text-overflow: ellipsis;
        .timeStyle {
          display: flex;
          margin-top: 6px;
          color: rgba(156, 164, 169, 1);
          font-weight: bold;
          font-size: 12px;
        }
      }
    }
    .children-for:first-child {
      margin-top: 20px;
    }
  }
}
.time-line {
  // #ifdef APP-PLUS || MP
  margin: 40rpx 0 100rpx 45rpx;
  // #endif
  // #ifdef H5
  margin: 40rpx 0 0 45rpx;
  padding-bottom: 70rpx;
  // #endif
  .time-line-item {
    .time-line-time {
      display: flex;
      justify-content: space-between;
      width: 400rpx;
      color: black;
      font-size: 28rpx;
      font-weight: bolder;
      margin-bottom: 30rpx;
    }

    .time-line-title {
      width: 650rpx;
      height: 50rpx;
      background-color: #fef0f0;
      line-height: 50rpx;
      padding-left: 20rpx;
      color: #2979ff;
      font-size: 28rpx;
    }
  }
}
.bottom-btn {
  font-size: 30rpx;
  font-weight: bolder;
  bottom: 0;
  right: 50%;
  left: 32%;
  position: fixed;
  margin-bottom: 20rpx;
}
.popup {
  font-size: 40rpx;
  margin: 30rpx;
  .title {
    text-align: center;
    color: #2b85e4;
    margin-bottom: 20rpx;
  }
  .word-break {
    word-wrap: break-word;
  }
}
</style>
